<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .red{
            color:red;
        }
    </style>
</head>
<body>
<div ng-app="myApp">
    <div ng-controller="firstController">
    <p>{{1+1}}</p>
    <p ng-bind="1+1"></p>
    <p ng-bind-template='{{5+5}}'></p>

    <!--$scope.cityArr = ['上海','北京','东京','首尔','吉隆坡']-->
    <ul ng-class="{red : status}" ng-init="cityArr =['上海','北京','东京','首尔','吉隆坡']" >
        <li ng-repeat="city in cityArr" ng-class-even="'偶数'" ng-class-odd="'奇数'">
            <span>index:{{$index}}</span>
            <span>first:{{$first}}</span>
            <span>middle:{{$middle}}</span>
            <span>last:{{$last}}</span>
            <span>{{city}}</span>
        </li>
    </ul>
    <div ng-include="'other.html'"></div>
    <div ng-include src="'other.html'"></div>

        <!--$event：当前事件的event对象-->
    <button ng-click="changeStatus($event)">切换状态</button>
    <p>{{status}}</p>
        <p ng-style="defaultStyle" ng-show="status">ng-style</p>

        <ul ng-switch on="status">
            <li ng-switch-when="true">
                true
            </li>
            <li ng-switch-when="false">
                false
            </li>
        </ul>

        <!--如果采用src会加载两次，
        因为src加载前会加载一次，加载的是空链接，会报404错误，
        angularjs加载后又会加载一次-->
        <!--GET http://localhost:63342/angularjs-kittencup/code/022-%E5%86%85%E7%BD%AE%E6%8C%87%E4%BB%A4/%7B%7Bsrc%7D%7D 404 (Not Found)-->
        <img ng-src="{{src}}" >

        <p ng-if="status">
            ng-show:{{true}}
        </p>
    </div>
</div>


<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
<script type="text/javascript" src="app/index.js"></script>


</body>
</html>